<template>
  <div class="vip">
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input
            v-model="formInline.user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.id"
            placeholder="请输入用户id"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="formInline.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportTable">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="tableData"  border style="width: 100%">
        <el-table-column prop="id" sortable label="用户id" width="180">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="180">
        </el-table-column>
        <el-table-column prop="avatar" label="用户头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" width="40px" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码"> </el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender == 1">男</el-tag>
            <el-tag v-if="scope.row.gender == 2">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="生日"> </el-table-column>
        <el-table-column prop="userLevel" label="用户等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender == 1">vip用户</el-tag>
            <el-tag v-if="scope.row.gender == 2">高级vip用户</el-tag>
            <el-tag v-if="scope.row.gender == 0">普通用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender == 1">禁用</el-tag>
            <el-tag v-if="scope.row.gender == 2">可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="openDialog(scope.row, scope.$index)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div class="dialog">
      <el-dialog
        title="用户编辑"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="dialogForm" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="dialogForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="dialogForm.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户手机">
            <el-input v-model="dialogForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-select v-model="dialogForm.gender" placeholder="请选择活动区域">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="2"></el-option>
              <el-option label="未知" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户等级">
            <el-select
              v-model="dialogForm.userLevel"
              placeholder="请选择活动区域"
            >
              <el-option label="普通用户" :value="0"></el-option>
              <el-option label="vip用户" :value="1"></el-option>
              <el-option label="高级vip用户" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="dialogForm.status" placeholder="请选择活动区域">
              <el-option label="可用" :value="0"></el-option>
              <el-option label="禁用" :value="1"></el-option>
              <el-option label="注销" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upEdit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { downloadXlsx } from "../../units/ex.js";
export default {
  data() {
    return {
      //对话框表单
      dialogForm: {},
      //对话框控制
      dialogVisible: false,
      // 分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      //表格数据
      tableData: [],
      //搜索栏
      formInline: {
        user: "",
        id: "",
        phone: "",
      },
    };
  },
  methods: {
    //导出
    exportTable() {
      let list = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let arr = [
 this.tableData[i].username,
          this.tableData[i].nickname,
         this.tableData[i].avatar,
       this.tableData[i].mobile,
        this.tableData[i].gender,
       this.tableData[i].birthday,
       this.tableData[i].userLevel,
        this.tableData[i].status,

        ]
         
     
        list.push(arr)
      }
      downloadXlsx(list, "整表.xlsx");
    },
    //编辑
    upEdit() {
      this.$store.dispatch("user/upEdit", this.dialogForm).then(() => {
        // console.log(res,'res')
        this.dialogVisible = false;
        this.$notify({
          title: "成功",
          message: "更新用户成功",
          type: "success",
        });
      });
    },
    //开对话框
    openDialog(row, index) {
      this.dialogVisible = true;
      this.dialogForm = row;
    },
    //对话框控制
    handleClose(done) {
      done();
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    //初始化表格数据
    getTableData() {
      let data = {
        page: 1,
        limit: 20,
        sort: "add_time",
        order: "desc",
      };
      this.$store
        .dispatch("user/getdata", data)
        .then((res) => {
          // console.log(res,'res')
          this.tableData = res.data.list;
          this.total = res.data.total;
        })
        .catch(() => {});
    },
    //搜索
    onSearch() {
      // console.log(data, "data");
      let data = {
        id: this.formInline.id,
      };
      this.$store.dispatch("user/search", data).then((res) => {
        // console.log(res, "res");
        this.tableData = [];
        this.tableData.push(res.data);
      });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style>
</style>